<template>
  <div class="box">
    <div class="input">
      <el-input placeholder="新建事务" v-model="content">
        <el-button
          type="primary"
          slot="append"
          icon="el-icon-plus"
          @click="submit"
          >添加</el-button
        >
      </el-input>
    </div>
    <div class="noteList">
      <ul>
        <li v-for="i in notes" :key="i._id">
          <span class="date">{{ i.date }}</span>
          {{ i.content }}
          <span
            ><el-switch
              @change="stateChange(i._id,i.state)"
              v-model="i.state"
              active-text="已完成"
              inactive-text="未完成"
            >
            </el-switch>
            <el-button type="danger" round @click="del(i._id)">删除</el-button>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import qs from "qs";
let formatDate = function (date) {
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  return y + "-" + m + "-" + d;
};

export default {
  data() {
    return {
      notes: [],
      content: "",
    };
  },
  methods: {
    submit() {
      this.$request({
        url: "/note/add",
        method: "post",
        data: qs.stringify({
          content: this.content,
          date: formatDate(new Date()),
          state: false,
        }),
      }).then((success) => {
          this.$notify({
          title: '成功',
          message: '已成功添加新的事务',
          type: 'success'
        });
        this.notes = success.data;
        this.content = "";
      });
    },
    stateChange(id,state){
     
     this.$request({
       url:'/note/change',
       method:'post',
       data:qs.stringify({
         id:id,
         state:state
       })
     })
    },
    del(id) {
      this.$confirm("是否删除当前事项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$request({
            url: "/note/delete",
            method: "post",
            data: qs.stringify({
              id: id,
            }),
          }).then((success) => {
            this.notes = success.data;
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  mounted() {
    this.$request({
      url: "/note",
      method: "get",
    }).then((success) => {
      this.notes = success.data;
    });
  },
};
</script>

<style scoped>
.input {
  text-align: center;
}
ul li {
  position: relative;
  margin: 20px 0;
  padding: 0 20px;
  height: 70px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  line-height: 70px;
  border-radius: 30px;
}
li span {
  position: absolute;
  right: 20px;
}
li span div {
  margin-right: 20px;
}
button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32), 0 0 6px rgba(0, 0, 0, 0.04);
}
.date {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  margin-left: 20px;
  border-radius: 30px;
  height: 70px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>